<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DJI 大疆商城 - DJI 大疆无人机、手持稳定器、专业影像设设备及增值服务（中国大陆）</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>

<div class="wrap">


    <div class="header">
        <h1>这是一个标题</h1>
        <p>这是一个段落</p>
    </div>
    <div class="content"></div>
    <div class="footer"></div>
</div>




    <!-- 顶头栏 -->
<div class="topHeader">
    <div class="topHeader-area">
        <div class="topHeader-left">
            <a href="#">DJI 大疆官网</a>
            <div class="annimate">
                <div>满 ¥99 顺丰包邮。热门主机使用花呗，京东白条和招行分期最高可享 3 期免息，下单即享 1% DJI币返点。</div>
                <div>618年中大促即将开启，DJI Pocket 2折扣5折起。</div>
                <div>大屏全能型办公本，小新Pro 16当仁不让！</div>
            </div>
        </div>
        <div class="topHeader-right">
            <ul>
                <li>
                    <a href="#">
                        <!-- <img src="./image/toheader.png" alt=""> -->
                        <span>购物车</span>
                        <span>0</span>
                    </a>
                </li>
                <span class="line">|</span>
                <li>
                    <a href="#">
                        <span>登录</span>
                    </a>
                </li>
                <span class="line">|</span>
                <li>
                    <a href="#">
                        <span>注册</span>
                    </a>
                </li>
                <span class="line">|</span>
                <li>
                    <a href="#">
                        <span>中国大陆(简体中文/￥CNY)</span>
                    </a>
                </li>
            </ul>

        </div>

    </div>
</div>
<div class="bottomHeader">
    <div class="bottomHeader-area">
        <div class="bottomHeader-left">
            <a href="./index.html">
            <img src="./image/logo.png" alt="">
            <span>商城</span>
            </a>    
        </div>
        <div class="bottomHeader-middle">
            <p>商品分类 ^</p>
            <p>
                <a href="#">以旧换新</a>
            </p>
            <p>
                <a href="#">购机指南</a>
            </p>
            <p>
                <a href="#"> DJI 大疆商城APP</a>
            </p>
        </div>
        <div class="bottomHeader-right">
            <form action="#">
                <input type="text" placeholder="搜索商品…">
                <button>
                    提交
                </button>
            </form>
        </div>

    </div>
    
</div>
<!-- 商品分类栏 -->
<div class="goods">
    <div class="goods-area">
        <ul class="goods-box">
            <!-- <li>
                <a href="#">
                    <div><img src="https://stormsend1.djicdn.com/stormsend/uploads/48c26180-9980-0136-3e40-12528100fbe3/mavic2.svg" alt=""></div>
                    <div>御 Mavic</div>
                </a>
            </li> -->
        </ul>
    </div>
</div>
<!-- 轮播图 -->
<div class="banner">
    <div class="banner-wrap">
        <!-- <div class="banner-content">
        <a href="#">
            <img class="img-box" src="" alt="">
        </a>
        </div> -->
    </div>
    <div class="next"></div>
    <div class="prev"></div>
    <div class="pagination">
        <!-- <p class="active"></p>
        <p></p>
        <p></p> -->
    </div>

    

</div>
<!-- 菜单部分 -->
    <div class="menu-top">
        <div class="menu-top-area">
            <div class="menu-top-content">
                <!-- <div class="menu-top-child">
                    <a href="#">
                    <div class="item-image">
                        <div class="hover-none">
                            <img src="https://stormsend1.djicdn.com/stormsend/uploads/3bdc20dc3ff429a75cc10a3d6d9e2d9a.png" alt="">
                        </div>
                        <div class="hover-none">
                            <img src="https://stormsend1.djicdn.com/stormsend/uploads/379a6fc31f016bcd7ce5d28df26d99ea.png" alt="">
                        </div>
                        <div class="item-hover">
                            <img src="https://stormsend1.djicdn.com/stormsend/uploads/47d474d01c89d1536cf03744b28a6933.png" alt="">
                        </div>
                    </div>
                    <h2>DJI FPV 套装</h2>
                    <div class="item-adv">沉浸式飞行体验·4K/60fps超广角拍摄·全新运动模式</div>
                    <div class="item-entry">DJI FPV,将飞行变成现实，全新沉浸式架控让你变身飞行员，像驾车般流畅自如地驾驭飞行，轻而易举实现心中所想，见所未见。</div>
                    <div class="item-price">￥ 7999</div>
                    </a>  
                </div> -->
            </div>
            <div class="menu-top-bill">
                <div>
                    <a href="#">
                        <p>
                            DJI Care 随心续享<br>商城专属，双重保障
                        </p>
                        <img src="https://stormsend1.djicdn.com/stormsend/uploads/8193accf66654676425ca7c303d37c77.jpg" alt="">
                    </a>
                </div>
                <div>
                    <a href="#">
                        <p>
                            DJI 以旧换新<br>闲置电子设备，抵价换新机
                        </p>
                        <img src="https://stormsend1.djicdn.com/stormsend/uploads/90badd9b7a75e194a2edc2e007507831.jpg" alt="">
                    </a>
                </div>
                
            </div>
            <div class="transition">
                <h2>御 Mavic</h2>
                <a href="#">更多></a>
            </div>
            <div class="menu-video">
                <div class="video-introduce menu-video-area">
                    <a href="#">
                    <div class="menu-video-img">
                        <img src="" alt="">
                    </div>
                    <div class="menu-video-doc">
                        <h3></h3>
                        <p></p>
                        <p></p>
                    </div>
                    </a>
                </div>
                <div class="video menu-video-area">
                    <video height="400" loop autoplay muted src="" ></video>
                </div>
            </div>
            <div class="good-list">
                <ul class="good-content">
                    <!-- <li>
                        <a href="#">
                            <div class="good-hover">
                            <div class="good-inner-img good-none">
                                <img src="https://product3.djicdn.com/uploads/spu/cover/7727599c23f26f2fa55ab60494cd3569@retina_small.png" alt="">
                            </div>
                            <div class="good-inner-img good-inner-hover">
                                <img src="https://product1.djicdn.com/uploads/spu/hover/03cf5b56f0c3520e87bf21ada53aac9a@origin.jpg" alt="">
                                <p>可拍摄 8K 延时影片，4K/60fps 视频，4800 万像素照片。拥有最长 34 分钟续航，最远 10 公里图传距离，焦点跟随功能，支持自行避障。</p>
                            </div>
                            </div>
                            <div class="good-type">
                                御 Mavic Air 2
                            </div>
                            <div class="good-price">
                                ￥4999
                            </div>
                        </a>
                    </li> -->
                </ul>
            </div>
        </div>
    </div>
<!--底部菜单栏 -->
<div class="bottom-menu">
    <div class="bottom-menu-area">
        <div class="server-box">
            <div class="server-img">
                <img src="./image/truck-moving.svg" alt="">
            </div>
            <ul>
                <li>全场满 ¥99 顺丰包邮</li>
                <li>（顺丰无法配送的区域将使用 EMS）</li>
            </ul>
        </div>
        <div class="server-box">
            <div class="server-img">
                <img src="./image/credit-card.svg" alt="">
            </div>
            <ul>
                <li>支持支付宝、微信、银联、银行转账</li>
                <li>支持花呗、京东白条和招行分期</li>
            </ul>
        </div>
        <div class="server-box">
            <div class="server-img">
                <img src="./image/comment-alt-smile.svg" alt="">
            </div>
            <ul>
                <li>邮箱：<a href="#">support@dji.com</a></li>
            </ul>
        </div>
        <div class="server-box">
            <div class="server-img">
                <img src="./image/newGovIcon.gif" alt="">
            </div>
        </div>
    </div>
</div>
<!-- 商城热卖 -->
<div class="shop-goods">
    <div class="shop-goods-area">
        <div class="shop-content">
            <div class="shop-dt">
                <dt>商城热卖</dt>
                <dl><a href="#">"御" Mavic</a></dl>
                <dl><a href="#">"晓" Spark</a></dl>
                <dl><a href="#">精灵 Phantom</a></dl>
                <dl><a href="#">灵眸 Osmo</a></dl>
                <dl><a href="#">"悟" Inspire</a></dl>
                <dl><a href="#">如影 Ronin</a></dl>
            </div>
            <div class="shop-dt">
                <dt>购买指南</dt>
                <dl><a href="#">支付方式</a></dl>
                <dl><a href="#">订单帮助</a></dl>
                <dl><a href="#">发货和物流</a></dl>
                <dl><a href="#">退换货条款</a></dl>
                <dl><a href="#">技术支持</a></dl>
                <dl><a href="#">售后服务政策</a></dl>
                <dl><a href="#">DJI币返利政策</a></dl>
            </div>
            <div class="shop-dt">
                <dt>商城项目</dt>
                <dl><a href="#">以旧换新</a></dl>
                <dl><a href="#">DJI大疆商城APP</a></dl>
            </div>
            <div class="shop-dt">
                <dt>社区</dt>
                <dl><a href="#">天空之城</a></dl>
                <dl><a href="#">DJI大疆社区</a></dl>
                <dl><a href="#">购机指南</a></dl>
            </div>
            <div class="shop-dt shop-dl">
                <dt>订阅</dt>
                <dl>
                    <p>
                        第一时间了解我们的促销活动，热销产品和最新信息。
                    </p>
                </dl>
                <dl>
                    <form action="#">
                        <input type="email" placeholder="请输入您的邮箱">
                        <button>提交</button>
                    </form>
                </dl>
                
            </div>
    </div>
</div>
<!-- 关于我们 -->
<div class="about-us">
    <div class="about-us-area">
        <div class="us-left">
            <ul>
                <li>
                    <img src="./image/logo (2).png" alt="">
                </li>
                <li>
                    <a href="#">关于我们</a>
                </li>
                <li>
                    <a href="#">联系我们</a>
                </li>
                <li>
                    <a href="#">招聘精英</a>
                </li>
                <li>
                    <a href="#">官方旗舰店</a>
                </li>
            </ul>
        </div>
        <div class="us-right">
            <ul>
                <li>
                    <a href="#">
                        <img src="./image/youku.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./image/weibo.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./image/wechat.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- 责任声明 -->
<div class="declear">
    <div class="declear-area">
        <div class="declear-copy">
        <span>Copyright &copy; 2021 DJI 大疆创新 版权所有</span>
        <a href="#">隐私权政策<i>·</i></a>
        <a href="#">使用条款<i>·</i></a>
        <a href="#">粤ICP备12032134号-11<i>·</i></a>
        <a href="#">营业执照<i>·</i></a>
        <a href="#">网站地图</a>
    </div>
    <div class="declear-problem">
        <span>网站问题反馈？</span>
        <a href="#">点击这里</a>
    </div>
    </div>
</div>


<script src="./data/data-index.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/index-goods.js"></script>
<script src="./js/index-banner.js"></script>
<script src='./js/index-menu-list.js'></script>
<script src ='./js/topHeader.js'></script>

</body>
</html>